<template>
  <el-drawer
    :visible.sync="$store.state.process.conditionDrawer"
    :with-header="false"
    :before-close="beforeClose"
    size="680px"
    @open="openDrawer">
    <div class="title">
      <Title title="条件设置" @click.native="printData" />
      <i class="icon el-icon-close" @click="beforeClose()"/>
    </div>
    <div v-if="conditionDrawerData.conditionList" class="content">
      <div class="input-item">
        <div class="label">条件名称</div>
        <el-input :class="{'isError': getError('nodeName').msg}" :maxlength="50" v-model="conditionDrawerData.nodeName" class="width-240" placeholder="条件名称" size="small" type="text" @input="removeError()" />
        <div v-if="getError('nodeName').msg" :style="{left: getError('nodeName').left || 0}" class="error-tool">{{ getError('nodeName').msg }}</div>
      </div>
      <div class="input-item">
        <div class="label">优先级</div>
        <el-input-number
          :class="{'isError': getError('priority').msg}"
          v-model="conditionDrawerData.conditionList.priority"
          :min="1"
          :max="10000"
          :precision="0"
          size="small"
          placeholder="优先级"
          class="timeout-item-input"
          label=""
          @input="removeError()"/>
        <div v-if="getError('priority').msg" :style="{left: getError('priority').left || 0}" class="error-tool">{{ getError('priority').msg }}</div>
      </div>
      <div class="input-item">
        <div class="label">匹配规则</div>
        <selectWithoutHttp :class="{'isError': getError('rule').msg}" v-model="conditionDrawerData.conditionList.rule" :list-data="ruleOptions" label-name="label" key-name="value" placeholder="请选择规则" @change="removeError" />
        <div v-if="getError('rule').msg" :style="{left: getError('rule').left || 0}" class="error-tool">{{ getError('rule').msg }}</div>
      </div>
      <template v-if="conditionDrawerData.conditionList.list">
        <div v-for="(item, index) in conditionDrawerData.conditionList.list" :key="index" class="input-item">
          <template v-if="isFixed">
            <selectWithoutHttp :class="{'isError': getError('keyword', index).msg}" v-model="item.keyword" :list-data="keywordOptions" class="mr10 width-120" label-name="label" key-name="value" placeholder="请选择字段" @change="changeKeyword($event, item)" />
            <selectWithoutHttp v-model="item.math" :list-data="getMath(item)" class="mr10 width-80" label-name="label" key-name="value" placeholder="请选择运算符" @change="removeError" />
            <UserField v-if="item.type === 'user'" :item="item" />
            <template v-else>
              <DeptSelect
                v-if="departmentFields.includes(item.keyword)"
                v-model="item.valueData"
                :is-can-include-sub-dept="item.isCanIncludeSubDept"
                :is-include-sub-dept="item.isIncludeSubDept"
                :element="handelElement()"
                :class="{ 'fixed-include-class': !['creatorDepartment', 'attributionMatrixName'].includes(item.keyword) }"
                class="width-240"
                @changeValue="e => changeValue(e, item)"
                @isSubDeptChange="e => isSubDeptChange(e, item)" />
              <el-date-picker
                v-else-if="timeFields.includes(item.keyword)"
                v-model="item.value"
                clearable
                class="width-240"
                value-format="timestamp"
                placeholder="请选择"
                size="small"
                type="date"
                format="yyyy/MM/dd"/>
              <selectWithoutHttp
                v-else-if="item.keyword === 'cooperDate'"
                :class="{'isError': getError('value', index).msg}"
                v-model="item.value"
                :list-data="cooperDateOptions"
                class="width-240"
                label-name="label"
                key-name="value"
                placeholder="请选择" />
              <el-input v-else :maxlength="500" v-model="item.value" class="width-240" placeholder="请输入字段内容" size="small" type="text" @input="removeError()" />
            </template>
          </template>
          <FilterValue
            v-else
            :class="{'filter-isError': getError('keyword', index).msg}"
            :filter-item="item"
            :field-list="formConditionList"
            :is-can-include-sub-dept="item.isCanIncludeSubDept"
            :is-include-sub-dept="item.isIncludeSubDept"
            :is-show-user-type="true"
            key-name="keyword"
            value-key-name="valueData"
            @isSubDeptChange="e => isSubDeptChange(e, item)"
            @changeKeyword="changeKeyword($event, item)"
            @change="changeFilterValue" />
          <img :src="copyGroupIcon" :class="{ 'include-class': item.isCanIncludeSubDept && !isFixed }" class="copy-icon" alt="" @click="copyItem(item)">
          <img :src="deleteGroupIcon" :class="{ 'include-class': item.isCanIncludeSubDept && !isFixed }" class="delete-icon" alt="" @click="deleteItem(index)">
          <div v-if="getError('keyword', index).msg" :style="{left: getError('keyword', index).left || 0}" class="error-tool">{{ getError('keyword', index).msg }}</div>
        </div>
      </template>
      <div class="input-item">
        <PlainCreateBtn @click="addList">添加规则</PlainCreateBtn>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapState } from 'vuex';
import Title from '@/components/Title';
import SelectRoleUser from './selectRoleUser';
import UserField from './userField';
import ElMessage from '@/utils/message';
import DeptSelect from '@/views/legal/process/components/formMake/components/deptSelect.vue';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { forEachFormOptions } from '@/utils/formMakeUtils.js';
import FilterValue from './filterValue';
import deleteGroupIcon from '@/assets/legalProcess/deleteIcon.png';
import copyGroupIcon from '@/assets/legalProcess/copyIcon.png';
import { FIXED_PROCESS_TYPE } from '@/utils/const/process';
import { departmentFields, timeFields } from './utils/const';
import { COOPER_DATE_TYPES } from '@/utils/const/process';
export default {
  components: { Title, SelectRoleUser, selectWithoutHttp, FilterValue, DeptSelect, UserField },
  props: {
    type: {// 增加type判断，避免不同环境id改变
      type: Number,
      default: 0
    },
    customFormList: { // 自定义表单设计配置字段
      type: Array,
      default: () => []
    },
    isFixed: { // 是否为固定表单
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deleteGroupIcon, copyGroupIcon,
      errorRolesIds: [],
      ruleOptions: [
        { value: 0, label: '符合以下全部规则' },
        { value: 1, label: '符合以下任一规则' }
      ],
      departmentFields, // 固定表单部门字段
      timeFields, // 固定表单时间字段
      formConditionList: [] // 自定义表单条件选项
    };
  },
  computed: {
    ...mapState({
      'conditionDrawerData': state => state.process.conditionDrawerData,
      'conditionTree': state => state.process.conditionTree
    }),
    cooperDateOptions() {
      return Object.keys(COOPER_DATE_TYPES).map(type => {
        return {
          value: type,
          label: COOPER_DATE_TYPES[type]
        };
      });
    },
    keywordOptions() {
      if (!this.isFixed) {
        return this.formConditionList;
      }
      if (this.type === FIXED_PROCESS_TYPE.PAYMENT_APPLY) {
        return [ // 请款流程开启事件
          { value: 'creator', label: '创建人' },
          { value: 'creatorDepartment', label: '创建人部门' },
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请人部门' },
          { value: 'company', label: '所属公司' },
          { value: 'accountType', label: '账户类型' },
          { value: 'contractSign', label: '合同签订' },
          { value: 'invoice', label: '发票' },
          { value: 'settlementAmount', label: '订单结算金额' },
          { value: 'actualAmount', label: '实付金额' },
          { value: 'requestFundsType', label: '付款类型' },
          { value: 'paymentBelong', label: '款项归属' },
          { value: 'confirmType', label: '达人结算确认' }
        ];
      }
      // 精力分配
      if (this.type === FIXED_PROCESS_TYPE.EFFORT_ALLOCATION) {
        return [
          { value: 'creator', label: '创建人' },
          { value: 'attributionMatrixName', label: '所属部门' }
        ];
      }
      // 签约内审
      if (this.type === FIXED_PROCESS_TYPE.SIGN_UP) {
        return [
          { value: 'createUser', label: '创建人' },
          { value: 'attributionMatrixName', label: '所属部门' },
          { value: 'supplierType', label: '供应商类型' }
        ];
      }
      // 申请原件
      if (this.type === FIXED_PROCESS_TYPE.APPLY_ORIGINAL) {
        return [
          { value: 'attributionMatrixName', label: '所属部门' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.INVOICE_APPLY) { // 开票申请
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'businessType', label: '业务类型' },
          { value: 'ourTitle', label: '我方抬头' },
          { value: 'invoiceType', label: '发票类型' },
          { value: 'taxpayerId', label: '纳税人名称' },
          { value: 'project', label: '开票项目' },
          { value: 'amount', label: '含税金额' },
          { value: 'isArrival', label: '是否到账' },
          { value: 'isExecution', label: '执行情况' },
          { value: 'isSign', label: '合同签订' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.INVOICE_ABANDON) { // 发票作废
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'abandonRemark', label: '作废说明' }
        ];
      }
      // 员工报销
      if (this.type === FIXED_PROCESS_TYPE.REIMBURSEMENT) {
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'company', label: '所属公司' },
          { value: 'type', label: '报销类型' },
          { value: 'isAllocation', label: '分摊费用' },
          { value: 'isWriteOff', label: '冲抵借款' },
          { value: 'writeOffAmount', label: '冲抵借款欠额' },
          { value: 'totalReimbursementAmount', label: '总报销金额' },
          { value: 'paymentAmount', label: '实付金额' }
        ];
      }
      // 借款申请
      if (this.type === FIXED_PROCESS_TYPE.BORROW_APPLY) {
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'company', label: '所属公司' },
          { value: 'remark', label: '借款说明' },
          { value: 'amount', label: '借款金额' }
        ];
      }
      // 还款申请
      if (this.type === FIXED_PROCESS_TYPE.REPAY_APPLY) {
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'company', label: '所属公司' },
          { value: 'remark', label: '还款说明' },
          { value: 'backAmount', label: '还款金额' }
        ];
      }
      // 转交欠款
      if (this.type === FIXED_PROCESS_TYPE.ARREARS_TRANSFER) {
        return [
          { value: 'attributionMatrixName', label: '所属部门' },
          { value: 'transferAmount', label: '转交欠款' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.TERMINATION) {
        return [
          { value: 'creator', label: '创建人' },
          { value: 'attributionMatrixName', label: '所属部门' },
          { value: 'supplierType', label: '供应商类型' }
        ];
      }
      // 外采额度申请
      if (this.type === FIXED_PROCESS_TYPE.EXTERNALHARVEST) {
        return [
          { value: 'userProposer', label: '申请人', type: 'user' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'applicationAmount', label: '申请外采额度' },
          { value: 'description', label: '申请说明' },
          { value: 'remainingAmount', label: '剩余外采额度' },
          { value: 'allAmount', label: '总外采额度' },
          { value: 'userAuthUser', label: '授权人', type: 'user' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.CUSTOMER_ADJUSTMENT) {
        return [
          { value: 'userProposer', label: '申请人', type: 'user' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'range', label: '申请范围' },
          { value: 'description', label: '申请说明' },
          { value: 'clientLevel', label: '客户等级' },
          { value: 'status', label: '客户状态' },
          { value: 'sale', label: '销售' },
          { value: 'loanQuota', label: '剩余欠款额度' },
          { value: 'loanPeriod', label: '欠款账期' },
          { value: 'clientLevelApplication', label: '申请客户等级' },
          { value: 'quotaApplication', label: '申请提升额度' },
          { value: 'payPeriodApplication', label: '申请提升账期' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.BLOGGER_FILTER) {
        return [
          { value: 'fans', label: '粉丝量' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.UP_ONLINE) {
        return [
          { value: 'proposer', label: '申请人' },
          { value: 'proposerDepartment', label: '申请部门' },
          { value: 'platform', label: '平台' },
          { value: 'cooperationOption', label: '合作方式' },
          { value: 'journalStatus', label: '上刊状态' }
          // { value: 'signStatus', label: '签约状态' }
        ];
      }
      const temp = [
        { value: 'creator', label: '创建人' },
        { value: 'creatorDepartment', label: '创建人部门' },
        { value: 'creatorPost', label: '创建人职位' },
        { value: 'proposer', label: '申请人' },
        { value: 'proposerDepartment', label: '申请人部门' },
        { value: 'proposerPost', label: '申请人职位' },
        { value: 'type', label: '合同类型' },
        { value: 'tempSource', label: '合同模板来源' },
        { value: 'legalTemplate', label: '使用法务的模板且未修改' },
        { value: 'ourStamp', label: '仅我方盖章' },
        { value: 'cooperDate', label: '合同日期/付款方式' }
      ];
      // 达人kol类，机构/平台合作类
      if (this.type === FIXED_PROCESS_TYPE.TALENT || this.type === FIXED_PROCESS_TYPE.MECHANISM) {
        temp.push({ value: 'cooPlatform', label: '合作平台' });
      }
      return temp;
    }
  },
  watch: {
    'conditionDrawerData.conditionList.list': {
      handler(val) {
        if (val && val.length) {
          val.forEach(it => {
            it.isCanIncludeSubDept = this.isFixed ? (!!departmentFields.includes(it.keyword) && !(['creatorDepartment', 'attributionMatrixName'].includes(it.keyword))) : !!this.handleIsDept(it.keyword);
          });
        }
      },
      deep: true
    }
  },
  methods: {
    beforeClose(done) {
      this.handelError();
      if (this.errorRolesIds.length) {
        ElMessage.error('请检查信息是否填写完整');
        return;
      }
      if (!this.isFixed) {
        // 服务端要求如果字段为用户时，需要把名称数组转为字符串传给vlaue
        this.conditionDrawerData.conditionList.list.forEach((item) => {
          if (item.type === 'user') {
            // userType 条件类型， 0: 自定义人员 1: 任务创建人 2: 选择部门 3: 角色组 4: 获取BP人员
            if (item.valueData && Array.isArray(item.valueData)) {
              switch (item.userType) {
                case 0:
                  item.value = JSON.stringify(item.valueData.map(i => i.userName));
                  break;
                case 2:
                  item.value = JSON.stringify(item.valueData.map(i => i.name));
                  break;
                case 3:
                case 4:
                  item.value = JSON.stringify(item.valueData);
                  break;
                default:
                  item.value = '';
                  break;
              }
            } else {
              item.value = '';
            }
          }
        });
        console.log('conditionList', this.conditionDrawerData.conditionList.list);
      }
      this.sortConditionNode();

      this.$store.commit('SET_CONDITION_SWITCH', false);
      this.$store.commit('SET_CONDITION_DATA', {});
      this.$store.commit('SET_CONDITION_TREE', {});
      done && done();
    },
    handelElement() {
      const el = {
        type: 'department',
        options: {
          selectChild: true,
          multiple: true,
          placeholder: '请选择部门'
        }
      };
      return el;
    },
    handelError() {
      this.errorRolesIds = [];
      const conditionDrawerData = this.conditionDrawerData;
      if (!conditionDrawerData.nodeName) {
        this.errorRolesIds.push({ type: 'nodeName', left: '82px', msg: '请输入条件名称' });
      }
      if (conditionDrawerData.conditionList && !conditionDrawerData.conditionList.rule && conditionDrawerData.conditionList.rule !== 0) {
        this.errorRolesIds.push({ type: 'rule', left: '82px', msg: '请选择匹配规则' });
      }
      if (conditionDrawerData.conditionList) {
        if (!conditionDrawerData.conditionList.priority) {
          this.errorRolesIds.push({ type: 'priority', left: '82px', msg: '请输入正确的优先级' });
        }
        if (conditionDrawerData.conditionList.list && conditionDrawerData.conditionList.list.length) {
          conditionDrawerData.conditionList.list.forEach((i, index) => {
            if (!i.keyword) {
              this.errorRolesIds.push({
                type: 'keyword', id: index, left: 0, msg: '请选择字段'
              });
            }
          });
        }
      }
    },
    // 获取自定义表单设置为审批条件的字段
    setKeywordOptions() {
      const list = _.cloneDeep(this.customFormList);
      const keywordOptions = [];
      forEachFormOptions(list, (element) => {
        if (element.options && element.options.isCondition) {
          keywordOptions.push(element);
          if ((element.type === 'subform' || element.type === 'linkForm' && element.options.isStatistics) && element.options.statistics) {
            const statistics = element.options.statistics;
            element.subform.forEach(el => {
              if (statistics.includes(el.key)) keywordOptions.push(el);
            });
          }
        }
      }, { notForEachSubform: true });
      this.formConditionList = keywordOptions;
    },
    addList() {
      const initData = {
        keywordName: '',
        keyword: '',
        math: '=',
        value: '',
        isCanIncludeSubDept: false,
        isIncludeSubDept: false,
        // userType 条件类型， 0: 自定义人员 1: 任务创建人 2: 选择部门 3: 角色组 4: 获取BP人员
        // 只有当字段类型为用户时才生效，指定了 valueData 里面存放什么值
        userType: 0,
        valueData: '',
        type: ''
      };
      if (this.isFixed) initData.valueData = [];
      if (this.conditionDrawerData.conditionList.list && this.conditionDrawerData.conditionList.list.length > 0) {
        this.conditionDrawerData.conditionList.list.push(initData);
      } else {
        this.conditionDrawerData.conditionList.list = [initData];
      }
    },
    sortConditionNode() {
      if (this.conditionTree && this.conditionTree.conditionNodes) {
        this.conditionTree.conditionNodes.sort((a, b) => {
          const aPriority = a.conditionList ? a.conditionList.priority || 9999 : 9999;
          const bPriority = b.conditionList ? b.conditionList.priority || 9999 : 9999;
          return aPriority - bPriority;
        });
      }
    },
    deleteItem(index) {
      this.conditionDrawerData.conditionList.list.splice(index, 1);
    },
    copyItem(item) {
      this.conditionDrawerData.conditionList.list.push(_.cloneDeep(item));
    },
    handleIsDept(key) {
      let result;
      this.customFormList.map(it => {
        if (it.type === 'grid') {
          it.columns.map(item => item.list.map(v => {
            if (v.key === key) {
              result = v;
            }
          }));
        } else if (it.key === key) {
          result = it;
        }
      });
      return result ? result.type === 'department' : false;
    },
    changeKeyword(val, item) {
      if (this.isFixed) {
        const data = this.keywordOptions.find(i => i.value === val);
        item.keywordName = data.label;
        item.type = data.type || '';
        item.valueData = [];
      } else {
        const data = this.formConditionList.find(i => i.key === val);
        item.keywordName = data.name;
        item.type = data.type || 'input';
      }
      item.value = '';
      if (item.isIncludeSubDept) {
        item.isIncludeSubDept = false;
      }
      this.removeError();
    },
    getError(type, id) {
      if (this.errorRolesIds.length <= 0) return {};
      return this.errorRolesIds.find(i => i.type === type && ((!id && id !== 0) || i.id === id)) || {};
    },
    removeError() {
      this.errorRolesIds = [];
    },
    changeFilterValue() {
      this.removeError();
      // this.conditionDrawerData.conditionList.list.forEach(i => {
      //   if (i.valueData) {
      //     if (typeof i.valueData === 'object' && Array.isArray(i.valueData)) {
      //       i.value = i.valueData.map(valItem => {
      //         if (typeof valItem !== 'object') return valItem;
      //         if (valItem.userName) {
      //           return valItem.userName;
      //         } else if (valItem.name) {
      //           return valItem.name;
      //         } else {
      //           return valItem.id;
      //         }
      //       });
      //     } else if (typeof i.valueData === 'object') {
      //       if (i.valueData.userName) {
      //         i.value = i.valueData.userName;
      //       } else if (i.valueData.name) {
      //         i.value = i.valueData.name;
      //       } else {
      //         i.value = i.valueData.id;
      //       }
      //     } else {
      //       i.value = i.valueData;
      //     }
      //     i.value = JSON.stringify(i.value);
      //   }
      // });
    },
    openDrawer() {
      this.setKeywordOptions();
      if (this.conditionDrawerData && this.conditionDrawerData.conditionList && this.conditionDrawerData.conditionList.list) {
        const ids = this.keywordOptions.map(i => {
          if (this.isFixed) return i.value;
          return i.key;
        });
        this.conditionDrawerData.conditionList.list = this.conditionDrawerData.conditionList.list.filter(i => {
          if (!i.userType && i.userType !== 0) this.$set(i, 'userType', 0);
          return ids.includes(i.keyword);
        });
      }
    },
    isSubDeptChange(e, item) {
      this.$set(item, 'isIncludeSubDept', e);
    },
    changeValue(e, item) {
      if (this.isFixed) {
        const res = JSON.stringify(e.map(it => it.name));
        this.$set(item, 'value', res);
      }
    },
    getMath(item) {
      if (item.type === 'user' || item.notNum) {
        return [
          { value: '=', label: '=' }, { value: '!=', label: '!=' },
          { value: '包含', label: '包含' }, { value: '不包含', label: '不包含' }
        ];
      }
      /**
       * 客户额度申请流程的申请范围和销售字段
       */
      if (this.type === FIXED_PROCESS_TYPE.CUSTOMER_ADJUSTMENT && ['sale', 'range'].includes(item.keyword)) {
        return [
          { value: '=', label: '=' }, { value: '!=', label: '!=' },
          { value: '包含', label: '包含' }, { value: '不包含', label: '不包含' }
        ];
      }
      if (this.type === FIXED_PROCESS_TYPE.BLOGGER_FILTER) {
        return [
          { value: '=', label: '=' }, { value: '!=', label: '!=' },
          { value: '>', label: '>' }, { value: '<', label: '<' },
          { value: '>=', label: '>=' }, { value: '<=', label: '<=' }
        ];
      }
      /**
       * 一般购销类 合同日期/付款方式
       */
      if (this.type === FIXED_PROCESS_TYPE.GENERA_PURCHASE && item.keyword === 'cooperDate') {
        return [
          { value: '=', label: '=' },
          { value: '!=', label: '!=' }
        ];
      }
      return [
        // =，!=，>，<，>=，<=，包含，不包含
        { value: '=', label: '=' }, { value: '!=', label: '!=' },
        { value: '>', label: '>' }, { value: '<', label: '<' },
        { value: '>=', label: '>=' }, { value: '<=', label: '<=' },
        { value: '包含', label: '包含' }, { value: '不包含', label: '不包含' }
      ];
    },
    printData() {
      console.log(this.conditionDrawerData);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 17px 20px;
}
.title {
  display: flex;
  height: 50px;
  padding: 0 24px;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  .icon {
    font-size: 18px;
    color: #999;
    cursor: pointer;
  }
}
.input-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
  .label {
    font-size: 14px;
    text-align: right;
    color: #666666;
    line-height: 1.5;
    width: 70px;
    margin-right: 12px;
  }
  .include-class {
    margin-top: -22px;
  }
  .fixed-include-class {
    position: relative;
    top: 11px;
  }
}
.width-80 {
  width: 80px;
  &::v-deep {
    .el-input__inner {
      width: 80px;
    }
  }
}
.width-240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mr10 {
  margin-right: 10px;
}
.width-120 {
  width: 120px;
  &::v-deep {
    .el-input__inner {
      width: 120px;
    }
  }
}
.delete-icon {
  width: 13px;
  cursor: pointer;
  margin-left: 9px;
}
.copy-icon {
  width: 13px;
  cursor: pointer;
  margin-left: 9px;
}
.error-tool {
    position: absolute;
    height: 20px;
    font-size: 12px;
    bottom: -20px;
    color: #f56c6c;
  }
.isError {
  &::v-deep {
    .el-input__inner {
      border-color: #f56c6c !important;
    }
  }
}
.filter-isError {
  &::v-deep {
    .filter-key .el-input__inner {
      border-color: #f56c6c !important;
    }
  }
}
::v-deep {
  .el-drawer__body {
    @include scrollBar($x: hidden, $y: scroll);
  }
}
</style>
